<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Table and Tree</title>
<meta name="generator" content="Oracle DARB XHTML Converter (Mode = document) - Version 5.1.2 Build 015" />
<meta name="date" content="2011-11-03T11:27:20Z" />
<meta name="robots" content="noarchive" />
<meta name="doctitle" content="Table and Tree" />
<meta name="relnum" content="Release 1.5" />
<meta name="partnum" content="E23376-02" />
<link rel="copyright" href="./dcommon/html/cpyr.htm" title="Copyright" type="text/html" />
<link rel="stylesheet" href="./dcommon/css/blafdoc.css" title="Oracle BLAFDoc" type="text/css" />
<link rel="contents" href="toc.htm" title="Contents" type="text/html" />
<link rel="index" href="index.htm" title="Index" type="text/html" />
<link rel="prev" href="lists.htm" title="Previous" type="text/html" />
<link rel="next" href="dialogs.htm" title="Next" type="text/html" />
</head>
<body>
<div class="header"><a id="top" name="top"></a>
<div class="zz-skip-header"><a href="#BEGIN">Skip Headers</a></div>
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top"><b>Lightweight UI Toolkit Developer's Guide</b><br />
<b>Release 1.5</b><br />
E23376-02</td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<tr>
<td align="center"><a href="lists.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="dialogs.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
<td>&nbsp;</td>
</tr>
</table>
<a name="BEGIN" id="BEGIN"></a></div>
<!-- class="header" -->
<div class="ind"><!-- End Header --><a id="Z4002e6e1292041" name="Z4002e6e1292041"></a>
<h1 class="chapter"><span class="secnum">4</span> Table and Tree</h1>
<p>Unlike the list that uses the render approach to create exceptionally large lists without much of an overhead, the tree and table are more "stateful" components and use a more conventional approach of nesting components.</p>
<p>To create a table instance a developer needs to first instantiate a model with the data and then create a table as follows:</p>
<a id="Z40022e81356328" name="Z40022e81356328"></a>
<div class="sect1">
<h2 class="sect1">Table</h2>
<p>A table is an editable grid component with variable sizes for its entries. Entries can be editable or not. Just like the list, the table has a model (<code>TableModel</code>) and a default model implementation (<code>DefaultTableModel</code>).</p>
<p>To create a table instance a developer needs to first instantiate a model with the data and then create a table as follows:</p>
<pre xml:space="preserve" class="oac_no_warn">
TableModel model = new DefaultTableModel(new String[] {
   "Col 1", "Col 2", "Col 3"}, new Object[][] {
  {"Row 1", "Row A", "Row X"},  {"Row 2", "Row B", "Row Y"},
  {"Row 3", "Row C", "Row Z"},
  {"Row 4", "Row D", "Row K"},
});
Table table = new Table(model);
 
 
</pre>
<div class="figure"><a id="Z40022e81357668" name="Z40022e81357668"></a>
<p class="titleinfigure">Figure 4-1 Sample Table</p>
<img src="img/tabletree.jpg" alt="Description of Figure 4-1 follows" title="Description of Figure 4-1 follows" longdesc="img_text/tabletree.htm" /><br />
<a id="sthref92" name="sthref92" href="img_text/tabletree.htm">Description of "Figure 4-1 Sample Table"</a><br />
<br /></div>
<!-- class="figure" -->
<p>A cell can be made editable by overriding the <code>isCellEditable</code> method of the model as follows:</p>
<pre xml:space="preserve" class="oac_no_warn">
public boolean isCellEditable(int row, int col) {
    return col != 0;
}
</pre>
<p>The table component contains a few more elaborate features such as the ability to span columns and rows and determine their width or height as percentage of available space. A table can be made to scroll on the X axis as well by setting it to <code>setScrollableX(true)</code>, in which case it can "grow" beyond the screen size.</p>
<p>To control the "rendering", the way in which a table creates the cells within it one needs to derive the table itself and override the method <code>createCell</code> as such:</p>
<pre xml:space="preserve" class="oac_no_warn">
Table table = new Table(model) {
    protected Component createCell(Object value, int row, int column, boolean editable) {
        // custom code for creating a table cell
        ...
    }
};
</pre>
<p>Notice that components created using <code>createCell</code> are "live" for the duration of the table's existence and are able to receive events and animate. They also occupy resources for the duration of the table's existence.</p>
</div>
<!-- class="sect1" -->
<a id="Z400087c1357250" name="Z400087c1357250"></a>
<div class="sect1">
<h2 class="sect1">Tree</h2>
<p>The LWUIT tree is remarkably similar to the table in its design. It however represents a hierarchical view of data such as a filesystem. In that sense a tree is must be provided with a model to represent the underlying data. It is assumed that the underlying data is already "hierarchic" in its nature, such as a corporate structure or a file system.</p>
<p>The tree model exists as an interface for this reason alone. Building it as a class doesn't make sense for the common use case of a domain specific data model. To create a tree model one must implement the two methods in the interface: <code>getChildren</code> and <code>isLeaf</code>.</p>
<p><code>getChildren</code> is the "heavy lifter" within the interface. It has one argument for the parent node and returns the children of this node as a vector. This method is called with a null argument for its parent representing the "root" of the tree (which isn't displayed). From that point forward all calls to the method will be with objects returned via this method (which are not leafs).</p>
<p><code>isLeaf</code> is trivial. It just indicates whether the object within a tree is a leaf node that has no children and can't be expanded.</p>
<div class="figure"><a id="Z4000ca51357825" name="Z4000ca51357825"></a>
<p class="titleinfigure">Figure 4-2 Tree Sample</p>
<img src="img/tree.jpg" alt="Description of Figure 4-2 follows" title="Description of Figure 4-2 follows" longdesc="img_text/tree.htm" /><br />
<a id="sthref93" name="sthref93" href="img_text/tree.htm">Description of "Figure 4-2 Tree Sample"</a><br />
<br /></div>
<!-- class="figure" -->
<p>For example, the Tree would invoke <code>getChildren(null)</code> and receive back the String's "X", "Y' and "Z" within the return vector. It would then call <code>isLeaf("X"), isLeaf("Y"), isLeaf("Z")</code> and render the tree appropriately (as parent nodes or as leafs based on the response to <code>isLeaf</code>).</p>
<p>If the user clicks the "X" node and it is not a leaf the tree expands to contain (in addition to the existing nodes) the response for <code>getChildren("X")</code> as subnodes of "X".</p>
<p>Most of the code below relates to the model. It would be more domain specific for any specific case.</p>
<pre xml:space="preserve" class="oac_no_warn">
class Node {
    Object[] children;
    String value;
 
    public Node(String value, Object[] children) {
        this.children = children;
        this.value = value;
    }
 
    public String toString() {
        return value;
    }
}
TreeModel model = new TreeModel() {
    Node[] sillyTree =  {
        new Node("X", new Node[] {
           new Node("Child 1", new Node[] {
           }),
           new Node("Child 2", new Node[] {
           }),
           new Node("Child 3", new Node[] {
           }),
       }),
       new Node("Y", new Node[] {
           new Node("A", new Node[] {
           })
       }),
       new Node("Z", new Node[] {
           new Node("A", new Node[] {
           }),
       }),
    };
 
    public Vector getChildren(Object parent) {
        Node n = (Node)parent;
        Object[] nodes;
        if(parent == null) {
            nodes = sillyTree;
        } else {
            nodes = n.children;
        }
        Vector v = new Vector();
        for(int iter = 0 ; iter &lt; nodes.length ; iter++) {
            v.addElement(nodes[iter]);
        }
        return v;
    }
 
    public boolean isLeaf(Object node) {
        Node n = (Node)node;
        return n.children == null || n.children.length == 0;
    }
};
 
Form treeForm = new Form("Tree");
treeForm.setLayout(new BorderLayout());
treeForm.addComponent(BorderLayout.CENTER, new Tree(model));
treeForm.show();
</pre></div>
<!-- class="sect1" -->
<a id="Z400087c1357370" name="Z400087c1357370"></a>
<div class="sect1">
<h2 class="sect1">Customizing the Tree</h2>
<p>The tree has special static methods to determine icons appropriate for expanded or folded folder and leaf nodes: <code>setFolderOpenIcon(Image)</code>, <code>setFolderIcon(Image)</code>, <code>setNodeIcon(Image)</code>.</p>
<p>Besides that, one can derive the tree component and override the <code>createNodeComponent</code> method to customize the returned component in any desired way.</p>
</div>
<!-- class="sect1" --></div>
<!-- class="ind" -->
<!-- Start Footer -->
<div class="footer">
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<col width="33%" />
<col width="*" />
<col width="33%" />
<tr>
<td valign="bottom">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<col width="*" />
<col width="48%" />
<col width="48%" />
<tr>
<td>&nbsp;</td>
<td align="center"><a href="lists.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="dialogs.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
</tr>
</table>
</td>
<td class="copyrightlogo"><img class="copyrightlogo" src="./dcommon/gifs/oracle.gif" alt="Oracle Logo" /><br />
<span class="copyrightlogo">Copyright&nbsp;&copy;&nbsp;2008, 2011,&nbsp;Oracle&nbsp;and/or&nbsp;its&nbsp;affiliates.&nbsp;All&nbsp;rights&nbsp;reserved.</span> <a href="./dcommon/html/cpyr.htm"><br />
<span class="copyrightlogo">Legal Notices</span></a></td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- class="footer" -->
</body>
</html>
